<form id="component-form-step-3" class="layui-form" action="" lay-filter="component-form-step-3">
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>字段名称</th>
            <th>字段数据</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>角色名称</td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>角色简介</td>
            <td>{{remark}}</td>
        </tr>
        <tr>
            <td>权限预览</td>
            <td>
                <div style="height: 300px;overflow: auto;">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr>
                            <th>节点名称</th>
                            <th>是否授权(YES/NO)</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="commParam.nodes" id="node1"}
                        <tr class="">
                            <td>{$node1['title']}</td>
                            <td id="node-{$node1['id']}" data-node-status>YES</td>
                        </tr>
                            {volist name="node1.children" id="node2"}
                            <tr class="">
                                <td>|---- {$node2['title']}</td>
                                <td id="node-{$node2['id']}" data-node-status>YES</td>
                            </tr>
                                {volist name="node2.children" id="node3"}
                                <tr class="">
                                    <td>|------------ {$node3['title']}</td>
                                    <td id="node-{$node3['id']}" data-node-status>YES</td>
                                </tr>
                                {/volist}
                            {/volist}
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <p style="text-align: center;"><button class="layui-btn" @click.stop.prevent="save">保存</button></p>
</form>
<script>
    layui.use(['upload','form'], function(){
        var upload = layui.upload;
        var $ = layui.jquery;
        var form = layui.form;

        // 初始化一个VUE对象
        var add_step3 = new Vue({
            'el' : '#component-form-step-3',
            'data' : {
                // step1
                name : '',
                remark : '',
                status : '',

                // step2
                nodes:[]
            },
            methods : {
                save : function () {
                    var layerLoading;
                    var data = {
                        // method:'commodity.Save.index',
                        action:"{$commParam['info']===null?'add':'edit'}"
                    };
                    if(!!commParam['info']){
                        data.id = commParam['info']['id'];
                    }
                    // step1
                    data.name=''+add_step1.name;
                    data.remark=''+add_step1.remark;
                    data.status=''+add_step1.status;
                    data.nodes=JSON.stringify(add_step2.gerNodes());
                    $.ajax({
                        url : "{:get_url('/admin/role/save')}",
                        // url : "/openapi.php",
                        type : 'post',
                        data : data,
                        // headers : {
                        //     'Debug-Password' : 'jxb123456'
                        // },
                        beforeSend : function () {
                            var errorArr = [];
                            var errorCls = 'red';
                            // for(var k in data)
                            // {
                            //     if(k!='video' && !data[k]){
                            //         errorArr.push('<li class="layui-bg-'+errorCls+'">保存失败：【'+k+'】必填</li>');
                            //     }
                            // }
                            if(errorArr.length > 0){
                                layer.open({
                                    title:'出错啦',
                                    type: 1,
                                    content: '<ol style="padding: 5px;">'+errorArr.join("")+'</ol>',
                                    btn: ['确定']
                                });
                                return false;
                            }

                            layerLoading = layer.load();
                        },
                        success : function (ret) {
                            console.log(ret);
                            if(ret.code == 200){
                                layer.msg('保存成功，正在刷新...', {
                                    icon: 1
                                    ,time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                },function () {
                                    window.location.href="{:get_url('/admin/role/save')}?id="+ret.data.id;
                                });
                            }else{
                                layer.msg(ret.msg, {icon: 2});
                            }
                        },
                        complete : function () {
                            layer.close(layerLoading);
                        }
                    });
                }
            },
            computed : {

            },
            watch : {

            }
        });

        var add_step3_init = function () {

            $('[data-node-status]').text('YES');

            var nodes = add_step2.gerNodes();
            for(var k in nodes){
                $('#node-'+nodes[k]).text('NO');
            }

            // step1
            add_step3.name=add_step1.name;
            add_step3.remark=add_step1.remark;
        };

        (function (add_step3) {

        })(add_step3);

        window.add_step3 = add_step3;
        window.add_step3_init = add_step3_init;
    });
</script>